<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>宠物管理</title>

    <style>
        .index-content {
            position: relative;
            margin-left: 222px;
            margin-top: -783px;
            padding: 20px;
            min-height: 86vh;
            z-index: 1;
        }

        .index-content::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url("img/rightbg.jpg");
            background-size: cover;
            opacity: 0.3;
            z-index: -1;
        }

        /* 操作按钮区域 */
        .index-content-operation {
            margin-bottom: 20px;
        }

        /* 操作区域标题 */
        .index-content-operation .info-detail {
            font-size: 30px;
            font-weight: bold;
            font-family: youyuan;
            color: #333;
        }

        .index-content-operation-search{
            display: flex;
            justify-content: space-between;
        }
        /* 搜索框样式 */
        .index-content-operation-search input[type="text"] {
            padding: 5px 10px;
            font-size: 14px;
            width: 250px;
            height: 28px;
            margin-right: 10px;
        }

        .index-content-operation-search button {
            padding: 6px 12px;
            font-size: 18px;
            background-color: #de7850;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            height: 40px;
            width: 100px;
        }

        .index-content-operation-search button:hover {
            background-color: #a44925;
        }

        /* 表格样式 */
        .table {
            width: 100%;
            border-collapse: collapse; /* 合并边框 */
            margin-bottom: 20px;
            margin-top: -15px;
        }

        /* 表头样式 */
        .table thead {
            background-color: #ffefc5;
            color: #495057;
            font-weight: bold;
        }

        .table thead th {
            padding: 12px;
            text-align: left;
            border-bottom: 2px solid #939191;
        }

        /* 表格主体样式 */
        .table tbody tr {
            transition: background-color 0.3s ease;
            background-color: #fffbf5; /* 隔行变色 */
        }

        .table tbody tr:hover {
            background-color: #fff3e7; /* 鼠标悬停时的背景颜色 */
        }

        .table tbody td {
            padding: 10px;
            text-align: left;
            vertical-align: middle;
            border-bottom: 1px solid #d2d4d7;
        }

        /* 按钮样式 */
        .btn {
            width: 50px;
            height: 35px;
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            border: 1px solid transparent;
            transition: background-color 0.3s, border-color 0.3s;
        }

        /* 按钮类型样式 */
        .btn-primary {
            background-color: #645f5f;
            color: white;
        }

        .btn-primary:hover {
            background-color: #4d4a4a;
            border-color: #000000;
        }

        .btn-success {
            background-color: #e8845e;
            color: white;
        }

        .btn-success:hover {
            background-color: #e16d3a;
            border-color: #812a0f;
        }

        .btn-warning {
            background-color: #ffde93;
            color: #72614f;
        }

        .btn-warning:hover {
            background-color: #ffd166;
            border-color: #e78f43;
        }

        /* 小按钮样式 */
        .btn-sm {
            font-size: 12px;
            padding: 5px 12px;
        }

        /* 禁用按钮样式 */
        .btn[disabled] {
            background-color: #f0f0f0;
            color: #ccc;
            cursor: not-allowed;
        }

        /* 表格内容中的按钮间距 */
        .table .btn {
            margin: 0 5px;
        }
    </style>

</head>
<body>
<jsp:include page="menu.jsp"/>
<div class="index-content">
    <div class="index-content-operation">
        <a class="info-detail"> >> 宠物管理</a>
    </div>
    <br>

    <div class="index-content-operation-search">
        <div>
            <input id="search_keyword" placeholder="昵称" type="text" name="search_keyword"/>
            <input type="hidden" id="searchColumn" name="searchColumn" value="pet_name"/>
            <button class="btn btn-line btn-default btn-sm" onclick="searchList()">搜 索</button>
        </div>
        <div class="index-content-operation">
            <button class="btn btn-line btn-success btn-sm"
<%--                    <c:if test="${loginUser.userType != '管理员'}">disabled="disabled" title="没有权限！！！"</c:if>--%>
                    onclick="window.location.href='pet_add.jsp'" style="width: 120px;border: 0;">添 加</button>

        </div>
    </div>
    <br>

    <table class="table table-striped table-hover table-bordered">
        <thead>
        <tr class="index-content-table-th">
            <th>昵称</th>
            <th>类型</th>
            <th>性别</th>
            <th>年龄</th>
            <th>主人</th>
            <th>主人电话</th>
            <th>备注</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${list}" var="vo">
            <tr class="index-content-table-td">
                <td>${vo.petName}</td>
                <td>${vo.petType}</td>
                <td>${vo.petSex}</td>
                <td>${vo.petAge}</td>
                <td>${vo.petMaster}</td>
                <td>${vo.petMasterPhone}</td>
                <td title="${vo.petText}">
                <c:choose>
                    <c:when test="${fn:length(vo.petText) > 19}">
                        <c:out value="${fn:substring(vo.petText, 0, 19)}..."/>
                    </c:when>
                    <c:otherwise>
                        <c:out value="${vo.petText}"/>
                    </c:otherwise>
                </c:choose>
                </td>
                <td>
                    <button class="btn btn-line btn-primary btn-sm" style="padding: 0px 1px;font-size: 16px;"
                      onclick="window.location.href='PetServlet?action=get&id=${vo.id}'">查 看</button>&nbsp;

                    <button class="btn btn-line btn-success btn-sm" style="padding: 0px 1px;font-size: 16px;"
<%--                            <c:if test="${loginUser.userType != '管理员'}">disabled="disabled" title="没有权限！！！"</c:if>--%>
                    onclick="window.location.href='PetServlet?action=editPre&id=${vo.id}'">编 辑</button>&nbsp;
                    <button class="btn btn-line btn-warning btn-sm" style="padding: 0px 1px;font-size: 16px;"
<%--                    <c:if test="${loginUser.userType != '管理员'}">disabled="disabled" title="没有权限！！！"</c:if>--%>
                    onclick="if(window.confirm('将要删除：${vo.petName}？'))window.location.href='PetServlet?action=delete&id=${vo.id}'">删 除</button>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
</div>
</body>
<script>
    function searchList() {
        window.location.href = "PetServlet?action=list&searchColumn="+document.getElementById("searchColumn").value+"&keyword=" + document.getElementById("search_keyword").value;
    }
</script>
</html>
